/** @jsxImportSource @emotion/react */
import * as React from "react";
import {Text,} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps,  useItemInputControl,} from "../../common/base";

/**类似： 附录7，  10的
 * */
export const Description  =
    React.forwardRef((
        {children, show, alone = true, refWidth,label}: InternalItemProps, ref
    ) => {
        const getInpFilter = React.useCallback((par: any) => {
            return {};
        }, []);
        const {inp, setInp} = useItemInputControl({ref});
        return (
            <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                                 alone={alone} label={label!}>
                <Text variant="h5">{label}</Text>
                {children}
            </InspectRecordLayout>
        );
});

//没有编辑录入需求的 附录 标图
export const DescriptionVw= ({children, orc, rep,label,padd=5,tag } : { orc: any, rep: any,label:any, children?: any,padd?:number,tag:string}
) => {
    return <>
        <div css={{"@media print": {paddingBottom: padd+'rem', pageBreakInside: 'avoid'}}}>
            <Text variant="h4" css={{marginTop: '1rem',}}>{label}</Text>
        </div>
        <div id={tag} css={{"@media print": {marginTop: '-'+padd+'rem'}}}>
            {children}
        </div>
    </>;
};
